<template>
    <div class="main">
        <headNav title="运动活跃度"></headNav>
        <div class="top">
            <div class="search">
                <img  src="@/assets/img/oa/search.png" alt="">
                <input @change="searchNotice" type="text" v-model.trim="searchWork" placeholder="输入关键字搜索">
            </div>
            <div class="punish">
                <select v-model="theClassId" @change="chooseClass">
                    <option v-for="item in classList" :key="item.ClassId" :value="item.ClassId">{{item.GradeName + item.ClassName}}</option>
                </select>
            </div>
        </div>
        <div class="tableContent">
            <innerNav v-if="isShow" @getRank="getRank"></innerNav>
            <div v-for="(item,index) in studentList" :key="index">
                <div class="oneStudent">
                    <div class="sortNum">
                        {{index+1}}
                    </div>
                    <div class="imgBox" :class="index == 0 ? 'first': index == 1 ? 'second' : index == 2 ? 'third' : '' " @click="toDetail(item)">
                        <img v-if="!item.portrait" src="@/assets/img/default_head.png" alt="">
                        <img v-else :src="item.portrait" alt="" onerror="this.src = 'static/img/default_head.png'">
                        <!-- <img :src="item.portrait" alt=""> -->
                    </div>
                    <div class="c-right">
                        <div class="left-r" @click="toDetail(item)">
                            <p class="studentName">
                                {{item.studentName}}
                            </p>
                            <p class="common">
                                {{item.gradeName + item.className}}
                            </p>
                        </div>
                        <div class="right-r">
                            <p class="likeNum">
                                {{item.praiseNum}}
                            </p>
                            <p>
                                <img @click="likeGo(item)" v-if="item.praise" class="like" src="@/assets/img/studentSport/zaning.png" alt="">
                                <img @click="likeGo(item)" v-else class="like" src="@/assets/img/studentSport/zan.png" alt="">
                            </p>
                        </div>
                        <div class="mid-r">
                            <p class="common">
                                <img class="huoyue" src="@/assets/img/studentSport/huoyue.png" alt="">
                                <span>活跃度：{{item.dailyActivity}}</span>
                            </p>
                            <p class="common">
                                超过{{item.transcendence}}的人
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="line"></div>
            </div>
            <div class="load-p">
                <load-more :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import innerNav from './headNav'
import { LoadMore} from 'vux'
export default {
    name: 'studentList',
    components: {
        headNav, innerNav, LoadMore
    },
    computed: {
        classList () {
            return this.$store.state.user.classList
        },
        classId () {
            return this.$store.state.studentSport.classId
        }
    },
    data () {
        return {
            studentList: [],
            searchWork: '',
            theClassId: '',
            rank: 1,
            isShow: false,
        }
    },
    activated () {
        this.isShow = true
        this.searchWork = ''
        this.theClassId = this.$store.state.user.classId
        this.$store.commit('studentSport/setClassId', this.theClassId)
        this.getList()
    },
    deactivated () {
        this.isShow = false
    },
    methods :{
        //切换班级 
        chooseClass () {
            this.$store.commit('studentSport/setClassId', this.theClassId)
            this.getList()
        },
        // 切换日月排行
        getRank (val) {
            this.rank = val
            this.getList()
        },
        // 搜索公告
        searchNotice () {
            this.getList()
        },
        // 获取今日日期
        getToday () {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return  year + '-' + month + '-' + day
        },
        // 获取列表
        getList () {
            this.studentList = []
            if (!this.theClassId) {
                return
            }
            var params = {
                classId: this.theClassId,
                rankDesc: this.rank == 0 ?'yesterday' : this.rank == 1 ?  'today': 'month',
                todayTime: this.getToday(),
                studentName: this.searchWork,
                teacherId: this.$store.state.user.loginUserId
            }
            this.$store.dispatch('studentSport/GetTeacherList', params).then(
                res => {
                   if (res.status == 200) {
                       this.studentList = res.data
                   } else {
                       this.studentList = []
                   }
                }
            )
        },
        // 跳转详情
        toDetail (item) {
            this.$store.commit('studentSport/setStudentId', item.studentId)
            this.$router.push('sportActive')
        },
        // 点赞 / 取消点赞
        likeGo (item) {
            if (this.rank == 2) {
                return
            }
            var params = {
                bePraseId: item.studentId,
                praseId: this.$store.state.user.loginUserId,
                rankDesc: this.rank == 0 ?'yesterday' : this.rank == 1 ?  'today': 'month',
                status: item.praise ? 2 : 1,
                todayDate: this.getToday()
            }
            this.$store.dispatch('studentSport/LikeGo', params).then(
                res => {
                    if (res.status) {
                        item.praiseNum = item.praise ? item.praiseNum - 1 : item.praiseNum + 1
                        item.praise = !item.praise
                    }
                }
            )
        }
    }
}
</script>
<style  scoped>
    .main{
        background: #fff;
    }
    .top{
        padding: 0.2rem;
        background: #fff;
        height: 1.04rem;
        line-height: 0.64rem;
        overflow: hidden;
        position: fixed;
        width: 100%;
        box-sizing: border-box;
        z-index: 100;
    }
    .oneStudent{
        padding: 0.2rem 0.02rem 0.2rem 0;
    }
    .sortNum{
        display: inline-block;
        font-size: 0.3rem;
        color: #666666;
        vertical-align: top;
        height: 0.9rem;
        line-height: 0.9rem;
        width: 0.6rem;
    }
    .imgBox{
        display: inline-block;
        width: 0.9rem;
        height: 1.01rem;
        margin-right: 0.18rem;
        vertical-align: top;
        text-align: center;
    }
    .first{
        background: url('../../assets/img/studentSport/one.png') no-repeat;
        background-size: 100%;
    }
    .second{
        background: url('../../assets/img/studentSport/two.png') no-repeat;
        background-size: 100%;
    }
    .third{
        background: url('../../assets/img/studentSport/three.png') no-repeat;
        background-size: 100%;
    }
    .imgBox img{
        width: 0.82rem;
        height: 0.82rem;
        position: relative;
        top: 0.14rem;
        border-radius: 50%;
        object-fit: cover;
    }
    .c-right{
        width: 72%;
        display: inline-block;
        padding-top: 0.13rem;
    }
    .c-right p{
        line-height: 0.46rem;
    }
    .huoyue{
        width: 0.35rem;
        height: 0.28rem;
        vertical-align: middle;
    }
    .like{
        width: 0.27rem;
        height: 0.28rem;
        vertical-align: middle;
    }
    .left-r{
        float: left;
    }
    .studentName{
        width: 1.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.3rem;
        color: #000;
        font-weight: bold;
    }
    .common{
        font-size: 0.24rem;
        color: #999;
    }
    .right-r{
        width: 1rem;
        float: right;
        text-align: right;
    }
   
    .likeNum{
        color: #666;
        font-size: 0.24rem;
    }
    .mid-r{
        float: right;
        /* margin-right: 0.42rem; */
    }
    .line{
        width: 5.2rem;
        height: 0.02rem;
        background: #E5E5E5;
        float: right;
    }
    .ct{
        display: flex;
        align-items: center;
    }
    .search{
        width: 4.4rem;
        float: left;
        background: #f5f5f5;
        border-radius: 0.15rem;
    }
    .search input,.tsearch input{
        font-size: 0.24rem;
        width: 3.5rem;
        vertical-align: middle;
        background: #f5f5f5;
    }
    .search img,.tsearch img{
        vertical-align: middle;
        width: 0.32rem;
        height: 0.32rem;
        margin: 0 0.15rem;
    }
    .tsearch{
        width: 100%;
        float: left;
        background: #f5f5f5;
        border-radius: 0.15rem;
    }
    .punish{
        float: right;
    }
    .punish select{
        border: none;
        font-size: 0.28rem;
        background: #fff;
        max-width: 2.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tableContent{
        padding: 1.04rem 0.2rem 0.2rem;
        background: #fff;
    }
    .load-p{
        padding: 1rem 0 0 0;
    }
</style>